<template>
	<view class="main">
		<!-- 		<view class="TopDiv">
			<view class="TopLeftDiv">
				<image :src="user.avatarUrl" mode=""></image>
			</view>
			<view class="TopRightDiv">
				<view class="TopTitleDiv">
					账号：{{user.nickName}}
				</view>

			</view>
		</view> -->
		<view class="top3">
			<view class="top2"></view>
		</view>

		<view class="top"> 
			<view class="region">
				<view class="upper">
					<view class="img-box">
						<!-- <image :src="user.sex == 1 ?'/static/Index/Man.jpg':'/static/Index/Women.jpg'">
						</image> -->
						<image :src='avatarUrl' mode="scaleToFill"></image>
					</view>
					<view class="info">
						<view class="name" v-if="!unlogin">{{user.nickName}}
						</view>
						<view class="name" v-if="unlogin">欢迎光临
						</view>
						<view class="no">{{ user.phone}}</view>
					</view>
					<view class="vip" v-if="user.isVip==0">
						<image src="/static/Index/vip_no.svg" class="vipimage"></image>
						<view class="" style="-webkit-transform: skew(-10deg);">
							未开通
						</view>
					</view>
					<view class="vip" v-else style="color: #ab6e0a;background: #decba6;">
						<image src="/static/Index/vip_yes.svg" class="vipimage"></image>
						<view class="" style="-webkit-transform: skew(-10deg);">
							已开通
						</view>
					</view>
				</view>
				<view class="lower">这个人好懒，什么都没有留下~</view>
			</view>
			<view class="count" @click="getToken" v-if="unlogin">
				<image src="/static/Index/vip_yes.svg" class="vipimage"></image>
				<view>登录扫码进店</view>
			</view>
			<view class="count" @click="BeCameVIP" v-if="user.isVip==0">
				<image src="/static/Index/vip_yes.svg" class="vipimage"></image>
				<view>免费领取会员</view>
			</view>


			<!-- 			<view class="count" @click="showUser" v-else style="width: 250rpx;margin-left: 260rpx;height: 80rpx;">
				<view style="color: #ffc72f;font-size: 40rpx;">
					{{ user.vipPoints }}
				</view>
				<view>积分</view>
			</view> -->

			<view class="tj-sction" v-if="user.isVip==1">
				<view class="tj-content">
					<view class="tj-item" @click="ToYouHuiJuan">
						<text class="num">{{ CouponNum }}</text>
						<text>优惠劵</text>
					</view>
					<view class="xian"></view>
					<view class="tj-item" @click="ToVipCode">
						<image src="/static/Index/VipCode2.svg" class="VipCode" style="margin-bottom: 8rpx;"></image>
						<text>会员码</text>
					</view>
					<view class="xian"></view>
					<view class="tj-item" @click="ToPoints">
						<text class="num">{{ user.vipPoints }}</text>
						<text>积分</text>
					</view>
				</view>
			</view>



		</view>
		<view class="menu-box1">

			<view class="menu" @click="ToXiaoFei">
				<image src="/static/Index/XiaoFeiJiLu.svg" style="width: 90rpx;height: 90rpx;"></image>
				<text>消费记录</text>
			</view>
			<view class="menu" @click="ToJiFen">
				<image src="/static/Index/JiFenShopping.png"></image>
				<text>积分商城</text>
			</view>

			<view class="menu" @click="ToYiJian">
				<image src="/static/Index/LianXiWoMen.svg"></image>
				<text>紧急出门</text>
			</view>
			<view class="menu" @click="ToJiaMen">
				<image src="/static/Index/aboutUs.svg"></image>
				<text>了解加盟</text>
			</view>
		</view>

		<!-- 		<view class="content nobanner">
			<view class="lists">

				<view class="list" @click="toOpinion">
					<image src="../../static/Index/YiJian.svg" class="Leftsvg"></image>
					<view class="text">意见与反馈</view>
					<image src="../../static/Index/JianTou.svg" class="rightsvg"></image>
				</view>
				<button class="list" open-type="contact">
					<image src="../../static/Index/LianXiKeFu.svg" class="Leftsvg"></image>
					<view class="text Lianxi">联系客服</view>
					<image src="../../static/Index/JianTou.svg" class="rightsvg"></image>
				</button>

			</view>
			<view class="tips">v1.0.25</view>
		</view> -->
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom" class="page-red-envelope">
			<view class="box">
				<view class="opened">
					<view class="bgc">
						<image class="bgc-img" src="/static/Index/bg3.png" mode="aspectFit" />
					</view>
					<!-- 					<view class="main">
						<view class="text-area">
							<button @click="showModal"
								style="background: linear-gradient(90deg,#dcb793,#f3dac0);color: #fff;border-radius: 48rpx;font-size: 32rpx;padding: 5rpx 80rpx;"
								shadow>确认领取</button>
						</view>
					</view> -->
					<view class="btn" @click="close">
						<image class="b-img" src="/static/Index/btn-icon.png" mode="aspectFit" />
					</view>

				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup2" type="bottom" class="page-red-envelope">

			<view class="GuanZhu">
				<view class="GuanZhuTitle">长按扫码咨询</view>

<!--  我们的 -->
				<image src="/static/Index/EWM.png" mode="" class="GuanZhuEWM" :show-menu-by-longpress="true" v-if="domain =='https://shht.wteam.club/api'"></image>
				
				<!-- 莱购 -->
				<image src="https://jkht.wteam.club/file/laigouEWM.png" mode="" class="GuanZhuEWM" :show-menu-by-longpress="true" v-if="domain =='https://shht.wteam.club/app'"></image> 
				
				<!-- 河南 -->
				<image src="https://jkht.wteam.club/file/henanEWM.png" mode="" class="GuanZhuEWM" :show-menu-by-longpress="true" v-if="domain =='https://admin3.51sioc.com/api'"></image> 

				<view class="TCbacc">
					<image src="/static/Index/TCBA.jpg" mode="" class="TCImage"></image>
				</view>
			</view>
		</uni-popup>

		<!-- 优惠券弹窗 -->
		<liiy-coupon-popup ref="coupon_pop" :content="content" :CouponList="CouponList" :theme="theme" :title="title"
			@getClick="handleGetClick()"></liiy-coupon-popup>
			
			
		<view-tabbar tabIndex=1></view-tabbar>
		<!-- 		<view class="contents">
			<view class="nav " @click="fault">
				<image src="../../static/Index/Index.svg" style="border-radius: 50%;"></image>
				<view>首页</view>
			</view>
			<view class="nav nav_Active" @click="mine">
				<image src="../../static/Index/My_A.svg" style="border-radius: 50%;"></image>
				<view>我的</view>
			</view>
		</view> -->
		<!-- 		<view class="qrCode" v-if="isShowQrCode" @click="showQrCode">
			<view class="qrImage">
				<image @click.stop src="../../static/icons/qrcode.png"></image>
			</view>
		</view> -->


	</view>
</template>

<script>
	import mine from "./mine.js";
	export default mine;
</script>

<style lang="scss">
	@import url("./mine2.css");

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
	}


	.white-box {
		width: 94%;
		background: white;
		border-radius: 10rpx;
		margin: -120rpx auto 20rpx;
		box-shadow: 0 6rpx 20rpx #e7e7e7;

		.tx {
			padding-top: 26rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-content: center;

			&-grid {
				box-sizing: border-box;

				&:first-child {
					margin-left: 40rpx;
				}

				&-comm-sign {
					display: block;
					border-radius: 40rpx 0 0 40rpx;
					font-size: 26rpx;
					padding: 16rpx 44rpx;
					background: linear-gradient(to right, #fef082, #ffc551);
					background-color: #fef082;
					color: #cf4400;
				}

				&-text {
					display: block;
					color: #333;
					font-size: 26rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					.title {
						font-size: 26rpx;
						font-weight: normal;
						color: #ff6423;
					}

					.money {
						font-size: 60rpx;
						color: #ff6423;
						letter-spacing: 2rpx;
						margin-bottom: 10rpx;

						&-b {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.palace {
			padding-bottom: 20rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;

			&-grid {
				flex: 1;
				position: relative;
				box-sizing: border-box;

				&:not(:last-child) {
					&:after {
						width: 1rpx;
						height: 80rpx;
						background: #fddece;
						content: ' ';
						display: inline-block;
						position: absolute;
						top: 0;
						right: 0;
					}
				}

				&-text {
					display: block;
					text-align: center;
					color: #333;
					font-size: 32rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					&-name {
						font-size: 26rpx;
						font-weight: normal;
						color: #ff8a4a;
					}

					&-data {
						font-size: 32rpx;
						color: #ff8a4a;
						letter-spacing: 2rpx;
						margin-bottom: 5rpx;

						&-b {
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}




	.tj-sction {
		@extend %section;
		flex-direction: column;
		background-color: white;
		// background-color: #0F2E58;
		width: 70%;
		margin-left: 15vw;
		box-shadow: 0rpx 3rpx 9rpx #bdbdbd;
		border-radius: 75rpx;

		.VipCode {
			margin-bottom: 2px;
			width: 60rpx;
			height: 50rpx;
		}

		.tit {
			color: #FFF;
			font-size: 30upx;
			padding: 30upx 0 0 40upx;
		}

		.tj-content {
			display: flex;
			flex-direction: row;
			align-content: center;
			justify-content: space-around;
			// margin: 0 0 15upx 0;
			margin: 0 30rpx 0 30rpx;
		}

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: 27upx;
			color: #A1A1A1;
		}

		.num {
			font-weight: bold;
			font-size: 39upx;
			color: #F8C480;
			margin-bottom: 8upx;
		}
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.box {
		position: relative;
		transition: transform 0.7s;
		z-index: 88;
		top: 300rpx;

		.opened {
			position: relative;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;

			.bgc {

				height: 58vh;

				.bgc-img {
					width: 100%;
					height: 100%;
					position: relative;
				}
			}



			.main {
				position: relative;
				text-align: center;
				z-index: 6;
				bottom: 218rpx;				
				:deep(.ayi-button) {
					height: 90rpx !important;
					background: linear-gradient(to right, #dbb393, #f7dec3);
					border-radius: 45rpx !important;
				}

				:deep(.ayi-button__text) {
					font-size: 28rpx;
					font-weight: 400;
					color: #78482f;
				}
			}
		}
	}

	.btn {
		text-align: center;
		position: relative;
		margin-top: 40rpx;

		.b-img {
			width: 67rpx;
			height: 67rpx;
		}
	}
</style>